import React, {Component} from 'react';
import './../App.scss';
import ItemList from './ItemList'
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import CircularProgress from '@material-ui/core/CircularProgress';

import ReactInfinitScroller from '../lib/react-vertical-infinite-scrolling'

let timer = null;
class TabItem extends Component {
    constructor(props) {
        super(props)
        this.state = {
            t: this.props.msg[0].time,
            h: 0,
            m: 0,
            s: 0,
            itemListDatase: this.props.msg,
            open: false,
            tracks: [],
            hasMoreItems: true
        };
    }

    setTime = () => {

        if (this.state.t > 0) {
            let x = this.state.t - 1;
            this.setState({
                t: x,
                h: Math.floor(x / 60 / 60),
                m: Math.floor(x / 60 % 60),
                s: Math.floor(x % 60)
            })
        }
        timer = setInterval(() => {
            if (this.state.t > 0) {
                let x = this.state.t - 1;
                this.setState({
                    t: x,
                    h: Math.floor(x / 60 / 60),
                    m: Math.floor(x / 60 % 60),
                    s: Math.floor(x % 60)
                })
            } else {
                clearInterval(timer);
            }

        }, 1000)
    }
    onDeletE = (index) => {
        let x = this.state.itemListDatase;
            x.splice(index, 1);
        this.setState({
            itemListDatase: x
        })

    }
    onSettingE = () => {
        this.setState({ 
            open: true 
        });
    }
    handleClose = () => {
        this.setState({ 
            open: false 
        });
    };
    componentWillMount(){
  
    }
    componentDidMount() {
        this.setTime();
    }
    componentWillUnmount() {
        clearInterval(timer);
    }
    loadItems(page) {
        const that = this;
        setTimeout(() => {
            const newData =this.state.itemListDatase
            const newTracks = that.state.tracks
            newTracks.push(newData)
            that.setState({
                tracks: newTracks
            })
        }, 500)
    }
    render() {
        const { hasMoreItems, tracks } = this.state
        const loader = <div className="loader" key={0}> <CircularProgress  /></div>;
        let items = [];
        tracks.map((val, i) => {
            val.map((v, index) => {
                items.push(
                    <ItemList
                        key={`${i}-${index}`}
                        msg={v}
                        onSetting={this.onSettingE.bind(this)}
                        onDelet={this.onDeletE.bind(this, index)}
                    />
                );
            })
        });
        return (
            <div className="tabitem">
                <div className="rem_time">
                    <span>距离开拍结束</span>
                    <span>
                        {
                            this.props.msg[0].time?(
                                this.state.h+":"+this.state.m+":"+this.state.s
                            ):(
                                "拍卖已经结束了"
                            )
                        }
                    </span>
                </div>
                <div className="itemlists">
                    <ReactInfinitScroller
                        pageStart={0}
                        loadMore={(e) => this.loadItems(e)}
                        hasMore={hasMoreItems}
                        loader={loader}
                        threshold={100}
                    >

                        <div className="row">
                        {items}
                        </div>
                    </ReactInfinitScroller>
                    {/* {
                        itemListDatas.map((item, index) => {
                            return (
                                <ItemList
                                    key={index}
                                    msg={item}
                                    onSetting={this.onSettingE.bind(this)}
                                    onDelet={this.onDeletE.bind(this, index)}
                                />
                            )
                        })
                    } */}
                    
                </div>
                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="alert-dialog-title"
                    aria-describedby="alert-dialog-description"
                    >
                    <DialogTitle id="alert-dialog-title">{"编辑当前项"}</DialogTitle>
                    <DialogContent>
                        <DialogContentText id="alert-dialog-description">
                            Let Google help apps determine location. This means sending anonymous location data to
                            Google, even when no apps are running.
                        </DialogContentText>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.handleClose} color="primary">
                            Disagree
                        </Button>
                        <Button onClick={this.handleClose} color="primary" autoFocus>
                            Agree
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default TabItem;